<template>
  <el-dialog
    v-bind="$attrs"
    :modal='false'
    :show-close='false'
    top='20px'
    width="700px"
    append-to-body>
    <div slot="title" class="dialog-header">
      <el-col :span="16">
        <h4>{{ title }}</h4>
      </el-col>
      <el-col :span="8" style="text-align: right;">
        <el-button type="info" @click="$emit('update:visible', false)">关闭</el-button>
      </el-col>
    </div>
    <el-row :gutter="20" style="height: calc(100vh - 250px);overflow: auto;">
      <el-form label-position="top" label-width="80px" :model="post_form" :rules="rules" ref="post_form">
        <el-col :span="24">
          <el-form-item label="用例名称" prop="title">
            <el-input v-model="post_form.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="优先级" prop="priority">
            <el-select v-model="post_form.priority" placeholder="请选择" style="width: 100%;">
              <el-option label="高" value="高"></el-option>
              <el-option label="中" value="中"></el-option>
              <el-option label="低" value="低"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属模块" prop="module">
            <el-input v-model="post_form.module"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="前置条件" prop="precondition">
            <el-input v-model="post_form.precondition" type="textarea"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item>
            <div slot="label" style="width: 656px;">
              <p style="float: left;">操作步骤</p>
              <el-button type="primary" icon="el-icon-edit" style="float: right;" @click="post_form.test_steps.push({expected: '',content: ''})">增加步骤</el-button>
            </div>
            <el-table
              :data="post_form.test_steps"
              border
              style="width: 100%">
              <el-table-column
                type="index"
                prop="number"
                align="center"
                width="50">
              </el-table-column>
              <el-table-column
                prop="content"
                label="步骤描述">
                <template slot-scope="{row}">
                  <el-input v-model="row.content" class="edit-input"/>
                </template>
              </el-table-column>
              <el-table-column
                prop="expected"
                label="预期结果">
                <template slot-scope="{row}">
                  <el-input v-model="row.expected" class="edit-input"/>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                align="center"
                width="100">
                <template slot-scope="scope">
                  <el-button @click.native.prevent="moveRow(scope.$index, post_form.test_steps)" type="text" size="small">移动</el-button>
                  <el-button @click.native.prevent="deleteRow(scope.$index, post_form.test_steps)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="comment">
            <el-input v-model="post_form.comment" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit" v-if="title == '新建用例'">提交</el-button>
      <el-button type="primary" @click="editCase" v-else>修改</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { initial_post_form } from "./case_content_data"
import { addTestCase, editTestCase } from "@/api/test_case"

export default {
  props: {
    post_form: {},
    title: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      initial_post_form,
      rules: {
        title: [{ required: true, message: '请输入用例名称', trigger: 'blur' }],
        priority: [{ required: true, message: '请选择优先级', trigger: 'change' }],
      },
    }
  },
  methods: {
    // 新建用例
    onSubmit() {
      this.$refs['post_form'].validate((valid) => {
        if (valid) {
          addTestCase(this.post_form).then(res => {
            // 初始化表单
            // for (const key in this.initial_post_form) {
            //   if (key == 'test_steps') {
            //     // test_steps是数组, 此处用深拷贝, 不然会污染初始值initial_post_form
            //     this.post_form[key] = JSON.parse(JSON.stringify(this.initial_post_form[key]))
            //   } else {
            //     this.post_form[key] = this.initial_post_form[key]
            //   }
            // }
            // 清除表单验证
            this.$nextTick(()=>{
              this.clearFormValidate()
            })
            this.$emit('fetchData')
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 编辑用例
    editCase() {
      this.$refs['post_form'].validate((valid) => {
        if (valid) {
          editTestCase(this.post_form).then(res => {
            this.$emit('fetchData')
            this.$emit('update:visible', false)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 清除验证
    clearFormValidate() {
      this.$refs['post_form'].clearValidate()
    },
    // 删除行
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    // 移动行
    moveRow(index, rows) {
      this.$prompt('请输入要移动到步骤几', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        const tmp = rows.splice(index, 1)
        rows.splice(value-1, 0, tmp[0])
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })   
      })
    },
  },
  mounted() {
  },
}
</script>

